<template>
  <div class="app-container">
    <el-form class="el_one" :model="formInline">
      <el-row>
        <el-col :span="8">
          <div class="grid-content" style="padding-left: 12px;">
            <el-form-item label="运单编号:">
              <el-input v-model="formInline.id" placeholder="请输入运单编号" style="width: 250px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content" style="padding-left: 12px;">
            <el-form-item label="订单编号:">
              <el-input v-model="formInline.orderId" placeholder="请输入订单编号" style="width: 250px;" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content" style="padding-left: 25px;">
            <el-form-item label="调度状态:">
              <el-select v-model="formInline.schedulingStatus" placeholder="请选择" style="width: 250px;">
                <el-option label="待调度" value="one1" />
                <el-option label="未匹配路线" value="one2" />
                <el-option label="已调度" value="one3" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content">
            <el-form-item label="起始地机构:">
              <el-select v-model="formInline.startAgencyName" placeholder="请选择" style="width: 250px;">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content">
            <el-form-item label="目的地机构:">
              <el-select v-model="formInline.endAgencyName" placeholder="请选择" style="width: 250px;">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="institution-content">
            <el-form-item label="当前所在机构:">
              <el-select v-model="formInline.currentAgencyName" placeholder="请选择" style="width: 250px;">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="buttod-content">
            <el-form-item>
              <el-button type="danger" style="width: 90px" @click="fnSeaerch">搜索</el-button>
              <el-button style="width: 90px" @click="fnResetting">重置</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="el_tow">
      <template>
        <el-table
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          size="mini"
        >
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="id" label="运单编号" width="130" />
          <el-table-column prop="orderId" label="订单编号" width="160" />
          <el-table-column prop="status" label="运单状态" width="160">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1">新建</span>
              <span v-else-if="scope.row.status==2">已装车,发往X转运中心</span>
              <span v-else-if="scope.row.status==3">到达</span>
              <span v-else-if="scope.row.status==4">到达终端网点度</span>
              <span v-else-if="scope.row.status==5">已签收</span>
              <span v-else>拒收</span>
            </template>
          </el-table-column>
          <el-table-column label="调度状态" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.schedulingStatus==1">待调度</span>
              <span v-else-if="scope.row.schedulingStatus==2">未匹配路线</span>
              <span v-else-if="scope.row.schedulingStatus==3">已调度</span>
            </template>
          </el-table-column>
          <el-table-column prop="startAgencyName" label="起始营业部" width="100" />
          <el-table-column prop="endAgencyName" label="终点营业部" width="120" />
          <el-table-column prop="currentAgencyName" label="当前所在机构" width="150" />
          <el-table-column prop="nextAgencyName" label="下一个机构" width="100" />
          <el-table-column prop="totalVolume" label="货品总体积(立方米)" width="120" />
          <el-table-column prop="totalWeight" label="货品总重量(千克)" width="150" />
          <el-table-column prop="created" label="创建时间" width="150" />
          <el-table-column prop="updated" label="更新时间" width="150" />
          <el-table-column fixed="right" label="操作" width="85">
            <template slot-scope="scope">
              <el-button type="text" @click="handleClick(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="el_s">
      <template>
        <div class="block">
          <el-pagination
            :current-page="paging.currentPage1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { getManapag } from '@/api/business'
export default {
  data() {
    return {
      paging: {
        currentPage1: 1
      },
      formInline: {
        // 订单编号
        orderId: '',
        // 运单编号
        id: '',
        // 调度状态
        schedulingStatus: '',
        // 起始地机构
        startAgencyName: '',
        // 目的地机构
        endAgencyName: '',
        // 当前所在机构
        currentAgencyName: '',
        page: 1,
        pageSize: 10
      },
      tableData: [
      ],
      list: [],
      counts: 0
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取数据
    async initData() {
      const res = await getManapag(
        this.formInline
      )
      console.log(res)
      this.tableData = res.items
      this.counts = res.counts
      console.log(this.list)
    },
    // 搜索
    fnSeaerch() {
      this.initData()
    },
    // 重置
    fnResetting() {
      this.formInline.orderId = ''
      this.formInline.id = ''
      this.formInline.schedulingStatus = ''
      this.formInline.startAgencyName = ''
      this.formInline.endAgencyName = ''
      this.formInline.currentAgencyName = ''
      this.initData()
    },
    onSubmit() {
      console.log('submit!')
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    handleClick(row) {
      console.log(row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.page = val
      this.initData()
    }

  }
}
</script>

<style>
.el_one{
  padding-top: 20px;
  padding-left: 30px;
  background-color: #fff;
}
.el_tow{
  padding: 30px 30px 0 30px;
  margin-top: 20px;
  background-color: #fff;
}
.el_s{
  padding-left: 300px;
}
</style>
